<template>
<!-- 详情页的购买和加入购物车 -->
  <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click='$toast("暂时没上班")' dot/>
        <van-goods-action-icon icon="cart-o" text="购物车" @click='goCart'  :badge='badge' />
        <van-goods-action-icon v-if='star' icon="star" text="已收藏" color="#ff5000" @click="star=false;$toast('取消收藏')"/>
        <van-goods-action-icon v-else icon="star" text="未收藏" color="#ccc"  @click="star=true;$toast('收藏成功')"/>
        <van-goods-action-button type="warning" text="加入购物车" @click="onCart" />
        <van-goods-action-button type="danger" text="立即购买" @click="onBuy" />
      </van-goods-action>
      <!-- sku -->
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId" 
        :hide-stock='sku.hide_stock'
        
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import {addCartDate,getGoodsCountDate} from '@/utils/http.js'
export default {
    name:'GoodsAction',
    props:['info','productList'],
    data() {
        return {
            star:false, //是否收藏
            show: false, //是否显示sku商品规格
            sku: {
                list:[], 
                tree: [],
                hide_stock: false, // 是否隐藏剩余库存
                price: "", //价格
                stock_num: 227, //当前 sku 组合对应的库存
            },
            goods: {
                // 默认商品 sku 缩略图
                picture: ""
            },
            goodsId:'', //商品id
            badge:'12', //已添加购物车数量徽标
        }
    },
    mounted(){
            // 调用 购物车显示初始数量
            this.getCount()
    },
    methods:{
        // 徽标购物车商品数量
        getCount(){
            getGoodsCountDate().then(res=>{
                this.badge = res.data.cartTotal.goodsCount
            })
        },
        // 转到购物车页面
        goCart(){
            this.$router.push('/cart')
        },
        // 立即购买
        onBuy(){
            this.onCart() 
        },
        // 加入购物车
        onCart(){
             // 获取数据
             this.sku.price=this.info.retail_price // 价格
             this.sku.stock_num=this.info.goods_number // 库存
             this.goods.picture=this.info.primary_pic_url // sku缩略图
             this.goodsId=this.info.id //商品id
            // 显示
            this.show=true
           
        },
        // sku立即购买
        onBuyClicked(){
            // 携带参数跳到购买页面
            this.$router.push({path:'/buy',query:{id:this.goodsId}})
        },
        // sku加入购物车
        onAddCartClicked(skuDate){
            // skuDat是购买的商品信息包括id数量
            // 加入购物车请求
            addCartDate({
                goodsId:skuDate.goodsId,
                number:skuDate.selectedNum,
                productId:this.productList[0].id
            }).then((res)=>{
                if(!res.errno){
                   // 调用购物车数量请求，重新渲染购物车徽标
                    this.getCount()
                    // 添加成功轻提示
                    this.$toast.success('添加成功'); 
                }
            }) 
            // 隐藏商品规格窗
            this.show=false
        }
    }
}
</script>

<style>

</style>